<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jTemplates - template engine in JavaScript</title>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-jtemplates.js"></script>

<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/adminPage.css" />
<script type="text/javascript">
        // data for testing
        var headerCount=0;
        var leftCount=0;
        var rightCount=0;
        jQuery(document).ready(function() {
            <!--顶部工具栏-->
            jQuery("#btnHeaderHeader").click(function(){
                var data = {};
                // attach the template
                jQuery("#emptyHeaderComponent"+headerCount).setTemplateElement("templateHeaderHeader");
                
                // process the template
                jQuery("#emptyHeaderComponent"+headerCount).processTemplate(data);
                headerCount=headerCount+1;
                jQuery('<div id="emptyHeaderComponent'+headerCount+'" style="border: 0px;width:100%;"></div>').appendTo('#componentHeaderList');
            });
            jQuery("#btnHeaderNav").click(function(){
                var data = {};
                // attach the template
                jQuery("#emptyHeaderComponent"+headerCount).setTemplateElement("templateHeaderNav");
                
                // process the template
                jQuery("#emptyHeaderComponent"+headerCount).processTemplate(data);
                headerCount=headerCount+1;
                jQuery('<div id="emptyHeaderComponent'+headerCount+'" style="border: 0px;width:100%;"></div>').appendTo('#componentHeaderList');
            });

                
            <!--左侧工具栏-->
            jQuery("#btnLeft").click(function(){
                var data = {};
                
                // attach the template
                jQuery("#emptyLeftComponent"+leftCount).setTemplateElement("templateNav");
                
                // process the template
                jQuery("#emptyLeftComponent"+leftCount).processTemplate(data);
                leftCount=leftCount+1;
                jQuery('<div id="emptyLeftComponent'+leftCount+'" style="border: 0px;width:100%;"></div>').appendTo('#componentLeftList');
                });

            <!--右侧工具栏-->
            jQuery("#btnRight").click(function(){
                var data = {};
                
                // attach the template
                jQuery("#emptyRightComponent"+rightCount).setTemplateElement("templateNav");
                
                // process the template
                jQuery("#emptyRightComponent"+rightCount).processTemplate(data);
                rightCount=rightCount+1;
                jQuery('<div id="emptyRightComponent'+rightCount+'" style="border: 0px;width:100%;"></div>').appendTo('#componentRightList');
            });
        }); 
</script>
</head>
<body style="padding:5px;">
    <div class="compontList" style="align:center;">
        <table width="98%">
            <tr>
                <td colspan="4">
                    <div class="componentButtonList column" id="componentButtonList">
                    <table width="100%">
                        <tr>
                            <td width="120px" style="border: 1px solid #D6D6D6;padding:1px;"><b>头部工具栏:<b>
                            </td>

                            <td align="left" style="border: 1px solid #D6D6D6;padding:1px;">
                            <a id="btnHeaderHeader" href="javascript:void(0)">头部</a>
                            <a id="btnHeaderNav" href="javascript:void(0)">导航条</a>
                            <a id="btnHeader" href="javascript:void(0)">Falsh组件</a>
                            <a id="btnHeader" href="javascript:void(0)">网页头部</a>
                            <a id="btnHeader" href="javascript:void(0)">网页头部</a>
                            </td>
                        </tr>
                        <tr>
                            <td style="border: 1px solid #D6D6D6;padding:1px;"><b>左侧工具栏:<b></td>
                            <td align="left" style="border: 1px solid #D6D6D6;padding:1px;">
                            <button id="btnLeft" text="add">左侧</button>

                            </td>
                        </tr>
                        <tr>
                            <td style="border: 1px solid #D6D6D6;padding:1px;"><b>右侧工具栏:<b></td>
                            <td align="left" style="border: 1px solid #D6D6D6;padding:1px;">
                            <button id="btnRight" text="add">右侧</button>
                            </td>
                        </tr>

                        <tr>
                            <td style="border: 1px solid #D6D6D6;padding:1px;"><b>底部工具栏:<b></td>
                            <td align="left" style="border: 1px solid #D6D6D6;padding:1px;">
                            <button id="btnRight" text="add">底部</button>
                            </td>
                        </tr>
                    </table>
                    </div>

                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <div class="componentHeaderList column" id="componentHeaderList">
                        <div id="emptyHeaderComponent0" style="border: 0px;width:100%;"></div>
                    </div>
                </td>
            </tr>

            <tr>
                <td  colspan="3" align="left" width="80%" valign="top">
                <div class="componentLeftList column" style="float:auto;" id="componentLeftList">
                        <div id="emptyLeftComponent0" style="border: 0px;width:100%;"></div>
                </div>
                </td>
                <td align="right" width="20%" valign="top">
                    <div class="componentRightList column" style="float:auto;" id="componentRightList">
                        <div id="emptyRightComponent0" style="border: 0px;width:100%;"></div>

                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <div class="componentFooterList column" style="border: 1px solid #D6D6D6;padding:4px;align:center;" id="componentFooterList">
                        <div id="emptyFooterComponent0" style="border: 0px;width:100%;"></div>
                    </div>
                </td>

            </tr>
        </table>
    </div>
<p style="display:none">
    <textarea id="templateHeaderHeader" rows="0" cols="0">
    <!--
    <div class="component" style="width:100%;margin:2px auto;" id="compItem_0_8_3">
        <div class="componentTitle">
            <span class="left">网页头部区域</span>
            <span class="close"><a href="javascript:void(0)" onclick="javascript:if(confirm('确定删除网页头部'))$(this).parents('div:first').parents('div:first').remove();">删除</a></span>
        </div>
        <div class="comItemContent">
            <table width="100%" border="0">
                <tbody>
                    <tr>
                        <td><label><b>网页头部区域:</b></label></td>
                        <td colspan="3"><label>选择网页头部区域后，前台网页会显示系统的头部区域出来</label></td>
                    </tr>           
                </tbody>
            </table>
        </div>
    </div>

    -->
    </textarea>
    <textarea id="templateHeaderNav" rows="0" cols="0">
    <!--
    <div class="component" style="width:100%;margin:2px auto;" id="compItem_0_8_3">
        <div class="componentTitle">
            <span class="left">系统导航栏</span>
            <span class="close"><a href="javascript:void(0)" onclick="javascript:if(confirm('确定删除系统导航栏'))$(this).parents('div:first').parents('div:first').parents('div:first').remove();">删除</a></span>
        </div>
        <div class="comItemContent">
            <table width="100%" border="0">
                <tbody>
                    <tr>
                        <td><label><b>系统导航栏:</b></label></td>
                        <td colspan="3"><label>选择系统导航栏后，前台网页会显示系统的导航栏出来</label></td>
                    </tr>           
                </tbody>
            </table>
        </div>
    </div>
    -->
    </textarea>
    <textarea id="templateFlash" rows="0" cols="0">
    <!--
    <div class="component" style="width:100%;margin:2px auto;" id="compItem_0_8_3">
        <div class="componentTitle">
            <span class="left">Falsh组件</span>
            <span class="close"><a href="javascript:up('compItem_0_8_3',0)"><img src="http://img1.cache.netease.com/t/active/special/upArrow.gif"></a>&nbsp;&nbsp;
            <a href="javascript:down('compItem_0_8_3',0)"><img src="http://img1.cache.netease.com/t/active/special/downArrow.gif"></a>&nbsp;&nbsp;
            <a href="javascript:void(0)" onclick="javascript:if(confirm('确定删除Falsh组件'))$(this).parents('div:first').parents('div:first').parents('div:first').remove();">删除</a></span>
        </div>
        <div class="comItemContent">
            <table width="100%" border="0">
                <tbody>
                    <tr>
                        <td><label><b>Falsh组件:</b></label></td>
                        <td colspan="3"><label>选择系统导航栏后，前台网页会显示系统的导航栏出来</label></td>
                    </tr>           
                </tbody>
            </table>
        </div>
    </div>

    -->
    </textarea>
</p>

<script type="text/javascript">
 jQuery("#result").setTemplate("Template by {$T.bold()} version <em>{$Q.version}</em>.");
 jQuery("#result").processTemplate("jTemplates");
</script>
</body>
</html>